<template>
	<view class="u-rela">
		<image class="page-bg"
			:src="dataList.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/village-detail-img1.png' : dataList.thumbnail"
			mode="widthFix"></image>
		<view class="page-wrap">
			<!-- 标题 -->
			<div class="u-flex title u-col-top">
				<image class="img"
					:src="dataList.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/village-detail-img1.png' : dataList.thumbnail"
					mode="widthFix"></image>
				<div class="u-flex-1 u-flex u-flex-col u-col-top">
					<text class="u-font-32 blod u-line-1">{{ dataList.title }}</text>
					<text class=" u-font-24 u-tips-color u-m-t-8">{{ dataList.altitude }}米 | {{ dataList.area }}</text>
					<u-rate class="u-m-t-8" :count="5" :current="dataList.rating" active-color="#FF8B35"
						inactive-color="#E6E6E6" gutter="10rpx" :disabled="true"></u-rate>
				</div>
				<image class="icon-location"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png" mode="widthFix"
					@click="tonav_map"></image>
			</div>
			<!-- 详情 -->
			<view class="u-flex u-m-t-80">
				<image class="icon-file-search"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-file-search.png"
					mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">详情</text>
			</view>
			<div class="desc u-m-t-40" v-html="dataList.content">

			</div>
			<!-- 相册 -->
			<view class="u-flex u-m-t-80">
				<image class="icon-picture"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-picture.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">相册</text>
			</view>
			<scroll-view scroll-x="true" class="img-wrap">
				<view class="" style="white-space: nowrap;">
					<image
						:src="item ? item : 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/village-detail-img2.png'"
						mode="widthFix" v-for="(item,index) in dataList.images"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<div class="list">
				<div class="item" v-for="(item,index) in commentList" :key="item.message_id">
					<image
						:src="item.userinfo.avatar == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataList: {},
				commentList: []
			}
		},
		onReady() {},
		onLoad(options) {
			// 乡村文旅详情
			if (options) {
				this.get_travel_cultureDetails(options.id)
			}
		},
		methods: {
			// 乡村文旅详情
			get_travel_cultureDetails(id) {
				this.$http({
					url: this.api.travel_cultureDetails,
					method: 'GET',
					data: {
						id
					}
				}).then(res => {
					if (res.code == 1) {
						this.dataList = res.data
						// 评论列表
						this.get_comment_index(this.dataList.id)
					}
				})
			},

			// 评论列表
			get_comment_index(target_id) {
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 1,
						target_id
					}
				}).then(res => {
					if (res.code == 1) {
						this.commentList = res.data.list
					}
				})
			},

			//跳转到地图
			tonav_map() {
				uni.navigateTo({
					url: `/pages/map/map?latitude=${this.dataList.latitude}&longitude=${this.dataList.longitude}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
	}

	.title {
		// border-bottom: 1px solid #DDDDDD;
		padding-bottom: 18rpx;

		.img {
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
		}

		.icon-location {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
		}
	}

	.location {
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}


	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.desc {
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.img-jd {
		width: 690rpx;
		height: 400rpx;
		border-radius: 20rpx;
	}

	.icon-picture {
		width: 40rpx;
		height: 40rpx;
	}

	.icon-file-search {
		width: 40rpx;
		height: 40rpx;
	}

	.img-wrap {
		width: 690rpx;
		height: 320rpx;
		margin-top: 35rpx;

		.grid {
			min-width: 12000rpx;
			display: grid;
			gap: 30rpx;
			grid-template-columns: repeat(auto-fill, 400rpx);
		}

		image {
			width: 400rpx;
			height: 300rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
		}
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.icon-comment {
			width: 36rpx;
			height: 36rpx;
		}

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>